<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self';">
    <link rel="stylesheet" href="tag_demo.css">
</head>

<body>
    <ul class="clearfix">
        <li>
            <div id="header">This is a header</div>
        </li>
        <li>
            <p class="text-muted">This is a paragraph.</p>
        </li>
        <li><span style="color: red;">This text is red.</span></li>
        <li> <label>label显示 文本 </label></li>
        <li><button title="Click me">Submit</button></li>
        <li><input type="text" name="username"></li>
        <li><input type="text" value="Default text"></li>
        <li><input type="text" placeholder="Enter your name"></li>
        <li><input type="password" placeholder="Enter your password"></li>
        <li><input type="password" name="password"></li>
        <li><a href="https://www.baidu.com">Visit Example</a></li>
        <li><a href="https://www.example.com" title="访问 Example 网站" target="_blank" rel="noopener">在新窗口或新标签页中打开链接</a>
        </li>
        <li><a href="https://www.example.com" target="_self" rel="noopener" style="color: red;">在当前窗口或标签页中打开链接（默认）。</a>
        </li>
        <li><a href="https://www.example.com" target="_parent" rel="noopener">在父框架中打开链接。</a></li>
        <li><a href="https://www.example.com" target="_top" rel="noopener">在整个窗口中打开链接，取消任何框架</a></li>
        <li><img src="../build/2.png" width="100" height="200" alt="Description"></li>
        <li><a href="../build/2.png" download="example.png">点击可下载文件</a></li>
        <li>
            <span>点击图片可下载</span>
            <a href="https://www.example.com">
                <img src="../build/2.png" width="50" height="50" alt="示例图片">
            </a>
        </li>
        <li>
            <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
        </li>
        <li>
            <del>
                <blockquote>
                    <p>Life is what happens when you're busy making other plans.</p>
                    <ins>
                        <footer>— John Lennon</footer>
                    </ins>
                </blockquote>
            </del>
        </li>
        <li>
            <span>表格</span>
            <table border="1">
                <thead>
                    <tr>
                        <th>列标题1</th>
                        <th>
                            <img src="../build/2.png" width="20" height="20" alt="表格的示例图片">
                            示例图片
                        </th>
                        <th>列标题3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><img src="../build/2.png" width="100" height="140" alt="表格的示例图片"></td>
                        <td>行1，列2</td>
                        <td>行1，列3</td>
                    </tr>
                    <tr>
                        <td>行2，列1</td>
                        <td>行2，列2</td>
                        <td><img src="../build/2.png" width="60" height="40" alt="表格的示例图片"></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>结尾</td>
                    </tr>
                </tfoot>
            </table>
        </li>
        <li>
            <span>表单</span>
            <form action="/" method="post">
                <!-- 文本输入框 -->
                <label for="name">用户名:</label>
                <input type="text" id="name" name="name" required>

                <br/>

                <!-- 密码输入框 -->
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>

                <br/>

                <!-- 单选按钮 -->
                <label>性别:</label>
                <input type="radio" id="male" name="gender" value="male" checked>
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女</label>

                <br/>

                <!-- 复选框 -->
                <input type="checkbox" id="subscribe" name="subscribe" checked>
                <label for="subscribe">订阅推送信息</label>

                <br/>

                <!-- 下拉列表 -->
                <label for="country">国家:</label>
                <select id="country" name="country">
                    <option value="cn">CN</option>
                    <option value="usa">USA</option>
                    <option value="uk">UK</option>
                </select>

                <br/>

                <!-- 提交按钮 -->
                <input type="submit" value="提交">
            </form>
        </li>
        <li>
            <span>iframe内嵌html</span>:
            <br>
            <iframe src="tag_demo.html" name="iframe_a"></iframe>
            <p><a href="https://www.baidu.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
        </li>
        
    </ul>

    <script src="tag_demo.js"></script>
</body>

</html>